<template>
	<view class="list">
		<view class="header spaceBetween">
			<view class="title">添加核心产品</view>
			<view class="btn" @click="add">+新增</view>
		</view>
		<view class="item" v-for="(i, index) in list">
			<image class="colse" @click.stop="del(index)" src="/static/images/colse.png" mode=""></image>
			<view class="title">产品{{ index + 1 }}</view>
			<goodsImgs @changeList="changeList" :index="index" :listData="i.product_img"></goodsImgs>
			<view class="title">产品名称</view>
			<inp class="inp" placeholder="请输入产品名称" v-model="i.product_name" name="product_name" :index="index" :value="i.product_name" @input="product_nameChange" />
			<view class="title">产品介绍</view>
			<inp class="inp" placeholder="请输入产品介绍" v-model="i.product_desc" name="product_desc" :index="index" :value="i.product_desc" @input="product_descChange"></inp>
		</view>
	</view>
</template>

<script>
	import inp from './inp.vue';
	import goodsImgs from './goodsImgs.vue';
	export default {
		name: 'goods',
		components: {
			goodsImgs,
			inp,
		},
		props: {
			listData: {
				type: Array,
				default: () => [],
			},
		},
		watch: {
			listData(newVal) {
				this.list = newVal;
			},
		},
		data() {
			return {
				list: [],
			};
		},

		methods: {
			del(index) {
				this.list.splice(index, 1);
			},
			changeList({ list, index }) {
				this.list[index].product_img = list;
				this.$emit('changProduct', this.list);
			},
			product_nameChange({ str, index }) {
				this.list[index].product_name = str;
				this.$emit('changProduct', this.list);
			},
			product_descChange({ str, index }) {
				this.list[index].product_desc = str;
				this.$emit('changProduct', this.list);
			},
			add() {
				this.list.push({
					product_img: null,
					product_desc: null,
					product_name: null,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.list {
		width: $connet-width;

		.header {
			width: $connet-width;
			margin-bottom: 20rpx;

			.title {
				font-size: $uni-font-size-12;
			}

			.btn {
				font-size: $uni-font-size-10;
				border-radius: calc(10px + 10rpx);
				padding: 10rpx;
				color: #fff;
				background: #1fc28b;
			}
		}

		.item {
			border: 1rpx solid #dddddd;
			padding: $submargin-width;
			margin-bottom: $submargin-width;
			position: relative;
			.colse{
				width: 30rpx;
				height: 30rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				z-index: 2;
			}
			.title {
				font-size: $uni-font-size-12;
				margin: 30rpx 0 20rpx;
			}
			.subtitle {
				color: #999999;
				font-size: $uni-font-size-10;
				margin-bottom: 20rpx;
			}

			.inp {
				// text-align: right;
				font-size: $uni-font-size-17;
				width: 100%;
				margin-bottom: 30rpx;
				padding: 0;
			}
		}
	}
</style>
